<template>
  <div class="attractInvestment">
    <h2 v-if="look">查看招商信息</h2>
    <div v-else>
      <h2 v-if="id">编辑招商信息</h2>
      <h2 v-else>新增招商信息</h2>

    </div>

    <div class="main mt-40">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item ref="title" label="标题" prop="title">
          <a-input :disabled="look" v-model="form.title" placeholder="请输入：园区招商、办公地点招商、厂房招租等内容" />
        </a-form-model-item>

        <a-form-model-item label="来源" prop="link">
          <a-input :disabled="look" v-model="form.link" />
        </a-form-model-item>
        <a-form-model-item label="摘要" prop="remark">
          <a-input :disabled="look" v-model="form.remark" type="textarea" />
        </a-form-model-item>
        <a-form-model-item label="内容" class="content-cls">
          <editor-bar :disabled="look" v-model="form.profile" placeholder="请输入招商计划内容"
            :openNullCheck="true"></editor-bar>
        </a-form-model-item>

        <!-- <a-form-model-item label="附件">
          <a-upload v-if="!look && form.merchantsFile.length<5" :action="UploadUrl" :headers="headers" :before-upload="beforeUpload" @change="handleChange" :show-upload-list="false">
            <a-button type="primary"> 上传附件</a-button>
          </a-upload>
          <div>
            <div class="files_box" v-for="(item,index) in form.merchantsFile" :key="index">
              <a :href="item.fileUrl" target="_blank" download="">{{item.fileName}}</a>
              <a-icon v-if="!look" @click="DelImg(index)" class="close" type="close" />
            </div>
          </div>
        </a-form-model-item> -->

        <a-form-model-item :wrapper-col="{ span: 14, offset: 2 }">
          <span v-if="!look">
            <a-button v-if="id == ''" :disabled="IsDisabled" type="primary" @click="onSubmit" class="mr-20">
              提交
            </a-button>
          </span>
          <span v-if="!look">
            <a-button v-if="id != ''" :disabled="IsDisabled" type="primary" @click="onSaveSubmit" class="mr-20">
              保存
            </a-button>
          </span>
          <a-button>
            <router-link to="/usercenter/OtherInformation">
              返回
            </router-link>
          </a-button>

          <!-- <a-button style="margin-left: 10px;" @click="resetForm">
            Reset
          </a-button> -->
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import {
  addEntMerchants,
  getentMerchantsinfo,
  updateEntMerchants,
} from "@/apis/user/EntMerchants";

import { getAnnouncemeDetailById, addAnnounceme, editAnnounceme } from '@/apis/com/announceme'


import { getToken } from "@/utils/auth"; // get token from cookie

import EditorBar from "@/components/wangEnduit/index.vue";
export default {
  components: { EditorBar },
  data () {
    return {
      IsDisabled: false,
      id: "",
      UploadUrl: GolbUrl._BASE_URL_ + "wenge/microservice-supply-consumer-web/sysFile/upload",
      // UploadUrl: "http://10.204.124.107:8081/wenge/sysFile/upload",

      isClear: false,
      headers: {
        Authorization: getToken(),
      },
      detail: "",
      labelCol: { span: 2 },
      wrapperCol: { span: 14 },
      other: "",
      form: {
        title: "",
        link: "",
        remark: "",
        profile: "",
        // merchantsFile: [],
        type: 1, //类型（1:招商;2:招标）
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur",
          },
          {
            max: 50,
            message: "标题不能超过20个字",
            trigger: "blur",
          },
        ],
        link: [
          {
            required: true,
            message: "请输入来源",
            trigger: "blur",
          },

        ],
        remark: [
          {
            required: true,
            message: "请输入摘要",
            trigger: "blur",
          },
          {
            max: 100,
            message: "摘要不能超过100个字",
            trigger: "blur",
          },
        ]
      },
    };
  },
  created () {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getentMerchantsinfo();
    }
    if (this.$route.query.look == true + "") {
      this.look = true;
    } else {
      this.look = false;
    }
  },
  methods: {
    // 移除附件
    DelImg (index) {
      this.form.merchantsFile.splice(index, 1);
    },
    beforeUpload (file) {
      // doc .docx .wps .pdf .xls .xlsx
      let _type = file.name.substring(file.name.indexOf("."));
      const isJpgOrPng =
        _type === ".doc" ||
        _type === ".docx" ||
        _type === ".wps" ||
        _type === ".pdf" ||
        _type === ".xls" ||
        _type === ".xlsx";
      if (!isJpgOrPng) {
        this.$message.warning("请上传正确的文件格式");
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.warning("请上传10M以内的大小文件");
        return false;
      }
      return isJpgOrPng && isLt2M;
    },

    handleChange (info) {
      console.log(info);
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        if (this.form.merchantsFile == null) {
          this.form.merchantsFile = [];
        }
        // Get this url from response in real world.
        let _files = {
          fileName: info.file.response.data.fileName,
          fileType: info.file.response.data.fileType,
          fileUrl: info.file.response.data.fileUrl,
          objectType: 5, //1:产品图片;2:产品资质荣誉;3:企业资质;4:企业荣誉奖项;5:招商附件;6:招标附件
        };
        this.form.merchantsFile.push(_files);
      }
    },
    onSubmit () {
      console.log("this.form", this.form);
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.form.profile !== '') {
            console.log('添加招商/招标', this.form);

            this.addEntMerchants(this.form);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    onSaveSubmit () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.form.merchantsContent !== '') {
            this.updateEntMerchants(this.form);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm () {
      this.$refs.ruleForm.resetFields();
    },

    // 获取详细信息
    getentMerchantsinfo () {
      getAnnouncemeDetailById(this.id)
        .then((res) => {
          if (res.code == 200) {
            this.form = res.data;
          }
        })
        .catch((error) => { });
    },
    //新增保存
    addEntMerchants (_params) {
      let that = this;
      that.IsDisabled = true;
      addAnnounceme(_params)
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            that.$message.success("新增成功");
            setTimeout(() => {
              that.IsDisabled = false;
              // that.$router.push("/usercenter/OtherInformation");
              this.$router.back()
            }, 50);
          } else {
            that.IsDisabled = false;

            that.$message.warning("新增失败");
          }
        })
        .catch((error) => {
          that.IsDisabled = false;
        });
    },

    updateEntMerchants (_params) {
      this.IsDisabled = false;
      editAnnounceme(_params)
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success("修改成功");
            setTimeout(() => {
              // this.$router.push("/usercenter/OtherInformation");
              this.$router.back()
              this.IsDisabled = false;
            }, 50);
          } else {
            this.IsDisabled = false;

            this.$message.warning("修改失败");
          }
        })
        .catch((error) => {
          this.IsDisabled = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.w-e-text {
  min-height: 500px;

  max-height: 500px;
}

.attractInvestment {
  padding: 21px 24px;
  background-color: #fff;
  border-radius: 4px;

  h2 {
    font-size: 22px;
    color: #303133;
    font-weight: 700;
    padding-bottom: 14px;
    border-bottom: solid 1px #e9e9e9;
  }

  /deep/ .content-cls.ant-form-item {
    .ant-form-item-label {
      label {
        &::before {
          display: inline-block;
          margin-right: 4px;
          color: #f5222d;
          font-size: 14px;
          font-family: SimSun, sans-serif;
          line-height: 1;
          content: "*";
        }
      }
    }
  }
}

.files_box {
  position: relative;
  background-color: #f3f3f3;
  padding: 0 5px;
  margin-top: 10px;

  &:hover {
    .close {
      display: block;
    }
  }

  .close {
    position: absolute;
    right: 10px;
    top: 12px;
    cursor: pointer;
    color: #fff;
    background-color: #188af1;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    line-height: 20px;
    vertical-align: middle;
    display: none;
  }
}

/deep/.w-e-text {
  min-height: 500px;

  max-height: 500px;
}
</style>